<template>
  <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      @submit="onSubmit"
  >
    <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>

  <a-button @click="to404">to 404</a-button>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import useUserStore from "../../store/modules/user.ts";
import { useRouter } from "vue-router";
import {asyncRouterMap} from "../../router/asyncRouterMap.ts";
import {RouteRecordRaw} from "vue-router";

const userStore = useUserStore()
const router = useRouter()

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

let formState = reactive<FormState>({
  username: 'admin',
  password: '000000',
  remember: true,
});

if (localStorage.getItem('userInfo')) {
  const userInfo = JSON.parse(<string>localStorage.getItem('userInfo'))
  if (userInfo) formState = userInfo
}


const onFinish = (values: any) => {
  // console.log('Success:', values);
  userStore.login(values)
};

const onFinishFailed = (_errorInfo: any) => {
  // console.log('Failed:', _errorInfo);
};

const onSubmit = (_event: any) => {
  // console.log('submit:', _event);
  console.log(router.getRoutes());
  router.addRoute(...asyncRouterMap)
  console.log(router.getRoutes());
  router.push('/welcome')
}

const to404 = () => {
  router.replace('/404')
}
</script>

<style scoped>

</style>